/*
  createVNode   创建虚拟DOM，h 函数
  render        渲染到页面的
*/
import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

// createVNode('标签名/组件', { 属性 })
const divVNode = createVNode('div', { class: 'xtx-message-container' })
// 把虚拟DOM，渲染到 body 中
render(divVNode, document.body)
// console.log(divVNode)
// 虚拟DOM渲染成功后，可以通过 el 属性获取到真实的 DOM 节点
const div = divVNode.el
console.log('真实DOM', div)

let timerId = null

// 最终使用的时候是调用 Message 函数
// Message({ type:'success', message: '提示文本' })
export const Message = ({ type, message }) => {
  // 动态创建组件，并渲染到页面中
  const vNode = createVNode(XtxMessage, { type, message })
  // 把提示组件渲染到 div 容器中，方便后期移除
  render(vNode, div)
  // 开启定时，定时器在 3s 后把组件移除掉
  clearInterval(timerId)
  timerId = setTimeout(() => {
    // 清空 div 容器的内容
    render(null, div)
  }, 3000)
}
